<template>
  <div class="user_add">
    <el-card class="box-card">
      <div class="title">
        <span>添加用户</span>
      </div>
      <div class="detail">
        <el-form
          :model="addData"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          style="float: left; width: 50%"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="公司名称" prop="org_id">
                <el-input
                  v-model="currentCompanyName"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="addData.nickname" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="addData.username" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="密码" prop="password">
                <el-input v-model="addData.password" show-password></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="联系手机" prop="telphone">
                <el-input v-model="addData.telphone" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="addData.email" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="管理权限" prop="admin">
                <el-switch
                  v-model="addData.admin"
                  active-text="开启"
                  inactive-text="关闭"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="bindCompany">
          <div>
            <el-input
              placeholder="请输入单位名称或单位负责人"
              v-model="searchData"
              clearable
              style="width: 250px"
            >
            </el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              style="margin-left: 15px"
              @click="searchCompany"
              >搜索</el-button
            >
          </div>
          <el-card class="box-card2" shadow="hover">
            <div class="table">
              <el-table
                ref="singleTable"
                :data="companyData.slice((lazyPage - 1) * 5, lazyPage * 5)"
                highlight-current-row
                @current-change="selectRow"
                style="margin: 5px auto; width: 100%"
                size="small"
              >
                <el-table-column property="company_id" label="ID" width="50">
                </el-table-column>
                <el-table-column
                  property="company_name"
                  label="公司名称"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  property="company_director"
                  label="负责人"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  property="company_tel"
                  label="联系电话"
                  width="120"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <div style="margin-top: 15px">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="total"
              :current-page="currentPage"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div class="btn">
          <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="margin-left: 50px"
            >提交<i class="el-icon-upload el-icon--right"></i
          ></el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "User_Add",
  inject: ["userRefresh"],
  data() {
    return {
      addData: {
        org_id: null,
        username: "",
        password: "",
        nickname: "",
        telphone: "",
        email: "",
        admin: false,
      },
      searchData: "",
      companyData: [],
      currentRow: null,
      currentCompanyName: "",
      currentPage_old: 1,
      currentPage: 1,
      total: 0,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        telphone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getCompanyList();
  },
  computed: {
    lazyPage: function () {
      if (this.currentPage < 4) {
        return this.currentPage;
      } else {
        return this.currentPage % 3 === 0 ? 3 : this.currentPage % 3;
      }
    },
  },
  methods: {
    //获取合作单位
    getCompanyList() {
      this.axios
        .get("/company/companyList", {
          params: {
            page: 1,
            count: 15,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.companyData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取停车位区域列表失败");
        });
    },
    back() {
      this.$store.commit("maskStatus_change", false);
      this.$router.go(-1);
      this.pageRefresh();
    },
    //刷新页面
    pageRefresh() {
      this.userRefresh();
    },
    //搜索合作单位
    searchCompany() {
      if (this.searchData) {
        this.axios
          .get("/company/searchCompany", {
            params: {
              companyName: this.searchData,
              companyDirector: this.searchData,
            },
          })
          .then((res) => {
            this.companyData = res.data.data.list;
          })
          .catch((err) => {
            this.$message.error("搜索合作单位失败");
            console.error(err);
          });
      } else {
        this.getCompanyList();
      }
    },
    //选中合作单位
    selectRow(val) {
      this.currentRow = val;
      this.currentCompanyName = this.currentRow.company_name;
      const companyId = this.currentRow.company_id;
      this.addData.org_id = companyId;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      if (Math.ceil(this.currentPage_old / 3) !== Math.ceil(val / 3)) {
        this.currentPage_old = val;
        this.pageLoad("/company/companyList", val, 3, 15)
          .then((res) => {
            this.companyData = res.data.data.list;
          })
          .catch((err) => {
            console.error(err);
            this.$message.error(`获取合作单位列表-第${val}页失败`);
          });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post("/user/addUser", this.addData, {
              "Content-Type": "application/json",
            })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.back();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("添加系统用户失败");
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.box-card {
  position: absolute;
  left: 30%;
  top: 10%;
  width: 880px;
  height: 620px;
  z-index: 999;
}
.title {
  width: 99%;
  height: 5vh;
  padding: 0 0 0 30px;
  line-height: 3vh;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px dashed #c4c6c7;
}
.title span {
  display: inline-block;
  width: 80%;
  height: 55%;
  padding: 0px 20px;
  border-left: 5px solid #3b83cc;
}
.detail {
  margin: 30px auto;
  width: 95%;
}
.detail /deep/ .el-input {
  width: 85%;
}
.detail /deep/ .el-form-item__error {
  margin-left: 8%;
}
.btn {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translate(-50%, 0);
  margin-bottom: 0;
}
.bindCompany {
  float: right;
  width: 50%;
  height: 55vh;
}
.box-card2 {
  margin-top: 20px;
  height: 38vh;
}
.table /deep/.el-table th > .cell {
  text-align: center;
}

.table /deep/.el-table .cell {
  text-align: center;
}
</style>